<template>
	<view class="">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">消息通知</text>
		</navBar>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>
			
		<scroll-view 
		@scrolltolower="scrolltolower"
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		scroll-y
		class="mian_message"
		>
		 <view v-if="messageList.length > 0">
		 	<view
		 	 v-for="(item,index) in messageList"
		 	 :key="item.messageId"
		 	 class="mian_message_item pd10">
		 		<view class="mian_message_item_l mr10">
		 			<image :src="xcxImgUrl && xcxImgUrl+'page_public/static/message.svg'"></image>
		 		</view>
		 		<view class="mian_message_item_r" style="width:632rpx">
		 			<view class="mian_message_item_r_t">
		 				<view style="display: flex;align-items: center;" class="">
		 					<text class="mian_message_item_r_t_l mr10">{{item.title ? item.title : ''}}</text>
		 					<u-badge :isDot="item.readStatus == 2" type="error"></u-badge>
		 				</view>
		 				<view class="mian_message_item_r_t_r">{{item.createTime ? Utils.DateFormateArr(item.createTime) : '' }}</view>
		 			</view>
		 			<u-tooltip 
		 			style="width:100%"
		 			:text="item.content ? item.content : ''" 
		 			overlay :buttons="['删除','已读']" 
		 			:showCopy='false'
		 			@click='delMessage(item,$event)'
		 			direction='top'></u-tooltip>
		 		<!-- 	<view class="mian_message_item_r_b">
		 				{{item.content ? item.content : ''}}
		 			</view> -->
		 			 
		 		</view>
		 	</view>	
		 </view>
			<view  v-else style="display: flex;align-items: center;justify-content: center;flex-direction: column;
    height: 357px">
				<image src="/static/newpic/noMessage.svg" mode=""></image>
				<view>暂无消息，您可以等会再来哦！</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {listMallBussinessMessageMap,batchMallBussinessMessageLog,deleteMallBussinessMessage} from '@/api/global.js'
	export default {
		computed:{
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight:'',
				hieght:'',
				pageData:{
					currentPage:1,
					pageSize:20
				},
				messageList:[],
				lastPage:0
			};
		},
		onLoad() {
			//获取数据
			this.getList()
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_message')
				
				
			})
		},
		methods:{
			//返回
			navToBack(){
				uni.navigateBack()
			},
			//删除,已读
			async delMessage(item,index){
				console.log(item,index);
				if(index == 1){ //已读
					let res = await batchMallBussinessMessageLog({
						messageId:[item.messageId],
						readAll:''
					})
					if(res.code == 2000){
						this.Utils.toast('已读成功')
						this.pageData.currentPage = 1
						this.messageList = []
						this.getList()
					}else{
						this.Utils.toast(`${res.msg}`)
					}
				} else if(index == 0){ // 删除
					let resdel = await deleteMallBussinessMessage({
						messageIds:[item.messageId],
					})
					if(resdel.code == 2000){
						this.Utils.toast('删除成功')
						this.pageData.currentPage = 1
						this.messageList = []
						this.getList()
					}else{
						this.Utils.toast(`${resdel.msg}`)
					}
				}
			},
			//下拉加载
			scrolltolower(){
				this.pageData.currentPage++
				if(this.pageData.currentPage > this.lastPage){
					return
				}else{
					this.getList()
				}
			},
			//获取列表
			async getList(){
				uni.showLoading()
				let res =  await listMallBussinessMessageMap({
					...this.pageData,
					type:7
				})
				if(res.code == 2000){
					uni.hideLoading()
					this.messageList = this.messageList.concat(res?.data?.info?.list || [])
					this.lastPage = res?.data?.info?.lastPage
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tooltip__wrapper{
		white-space: inherit!important;
	}
.mian_message{
	box-sizing: border-box;
	width: 100%;
	
	.mian_message_item{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border: 1px solid #f3f3f3;
		
		.mian_message_item_l{
			width: 60rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.mian_message_item_r{
			flex: 1;
			.mian_message_item_r_t{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mian_message_item_r_t_l{
					font-size: $font_size_14;
					color: $text_color_333;
					font-weight: bold;
				}
				.mian_message_item_r_t_r{
					font-size: $font_size_12;
					color: $text_color_808080;
				}
			}
			.mian_message_item_r_b{
				font-size: $font_size_12;
				color: $text_color_808080;
				margin-top: 10rpx;
			}
		}
	}
}
/deep/.u-tooltip{
	flex-direction: column!important;
	margin-top: 20rpx;
}
/deep/.u-tooltip__wrapper{
	white-space:normal;
}
/deep/.u-transition.u-fade-enter-to.u-fade-enter-active {
	    margin-top: -4px !important;
}

</style>
